<template>
   <el-container class="content">
         <div class="login_wrap">

            
             <el-form ref="form" :model="form" label-width="30px" >
                <el-form-item prop="name">
                    <template slot="label">
                        <i class="el-icon-user iconfont"></i>
                    </template>
                    
                    <el-input class="itemInput" autocomplete="off" v-model="form.name" placeholder="请输入用户名"/>
                </el-form-item>
               
                <el-form-item prop="pass">
                    <template slot="label">
                        <i class="el-icon-shopping-bag-2 iconfont"></i>
                    </template>
                        <el-input class="itemInput" type="password" autocomplete="off" v-model="form.pass" placeholder="请输入密码"/>

                </el-form-item>
                
                <div class="reg">
                    <span @click="$router.push('/reg')">注册</span>
                    <span @click="$router.push('/update')">忘记密码?</span>
                </div>
                <div class="loginBtn" @click="login">登录</div>
            </el-form>
         </div>
   </el-container>    
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class Login extends Vue{
  
   
    form={
      name:"",
      pass:""
    }
    async login(){
       if(this.form.name==''){
           this.$message.warning("填写账号")
           return;
       }else if(this.form.pass==''){
           this.$message.warning("填写密码")
           return;
       }else{

           const obj=await this.$httpajax.post('auth/login',{
                username:this.form.name,
                password:this.form.pass
            }).catch((error)=>{

                    if(error.response.status==401){
                    this.$message({
                        message: error.response.data.message,
                        type: 'warning'
                    })
                    
                    return {
                        status:401
                    };
                    }
                    
            });
            if(obj.status!=401){

                    sessionStorage.setItem('token',obj.data.token)
                
                    window.location.href="/"
            }

       }

    }
}
</script>
<style lang='less' scoped>
@blue:white;
.content{
   height:100vh;
   min-width:1200px;
   min-height:700px;
   display: flex;
   background: url('../assets/login.jpg') no-repeat;
    background-size:cover;
   flex-direction: row;
   align-items: center;
   .login_wrap{
       width:18%;
       margin-left:15%;
        .reg{
            display:flex;
            justify-content: space-between;
            color:white;
            cursor: pointer;
            font-size:0.6rem;
           
        }
        .iconfont{
            color:white;
        }
       
        .itemInput{
            border:none;
            outline:none;
            background: transparent;
            font-size: 0.8rem;
            color:white;
        }
        .divder{
            width:100%;
            height:1px;
            background: white;
            margin-bottom:12px;
        }
        .loginBtn{
            width:100%;
            padding:4% 0;
            margin-top:30px;
            border-radius: 10px;
            background: white;
            font-size:0.6rem;
            color:#0c69d7;
            text-align: center;
            cursor: pointer;
        }
      
   }

   input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: @blue;
    }
    input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: @blue;
    }
    input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: @blue;
    }
    input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: @blue;
    }
}
</style>